<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.CalibResultReport"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <div id="htmlContent" style="width: 700px">
        <div style="text-align: center; width: 100%">
          <div style="font-size: 25px; font-weight: bold; margin-bottom: 10px">
            {{ dataList.CalibResultReport }}
          </div>
          <table
            style="border: 1px solid black; width: 700px"
            cellspacing="0"
            cellpadding="0"
          >
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.DeviceName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 250px;
                  border-bottom: 1px solid black;
                "
              >
                {{ formData.deviceDtos[0].name }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.EquipModel }}
              </td>
              <td style="width: 250px; border-bottom: 1px solid black">
                {{ formData.deviceDtos[0].specifications }}
              </td>
            </tr>

            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.CalibrationPersonName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 250px;
                  border-bottom: 1px solid black;
                "
              >
                {{ formData.calibrationPersonName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.CalibDate }}
              </td>
              <td style="width: 250px; border-bottom: 1px solid black">
                {{ formatTime(formData.calibrationDate) }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border: 1px solid black;
                "
              >
                {{ dataList.DeviceFactoryNum }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.deviceDtos[0].factoryNum }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.DeviceNumber }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.deviceDtos[0].num }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.CertiNumber }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.certificateNo }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.CalibFacility }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.company }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.CalibRequire }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.verificationObject }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td style="border-bottom: 1px solid black" colspan="4">
                {{ dataList.ReportCertiCheck }}
              </td>
            </tr>

            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.InspectionItem }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.CertiContent }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.InspectionResult }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.ReportWarn }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ formData.projectResultInfoName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{
                  formData.projectResultInfo == 1
                    ? dataList.Correct
                    : dataList.Deny
                }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.ReportWarn2 }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ formData.projectResultRangName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{
                  formData.projectResultRang == 1
                    ? dataList.Correct
                    : dataList.Deny
                }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.ReportWarn3 }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ formData.projectResultSureName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{
                  formData.projectResultSure == 1
                    ? dataList.Correct
                    : dataList.Deny
                }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.ReportWarn4 }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ formData.projectResultPreciseName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{
                  formData.projectResultPrecise == 1
                    ? dataList.Correct
                    : dataList.Deny
                }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                colspan="2"
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.ReportWarn5 }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ formData.projectResultCoverName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{
                  formData.projectResultCover == 1
                    ? dataList.Correct
                    : dataList.Deny
                }}
              </td>
            </tr>
            <tr>
              <td colspan="4" style="border-bottom: 1px solid black">
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.CalibResultConfirm }}
                </div>
                <div style="width: 700px" v-html="formData.content"></div>
                <img
                  v-for="(item, index) in formData.sysBusinessImgWarehouseList"
                  :key="index"
                  :src="item.fileBase"
                />

                <!-- <div style="width: 700px" v-html="formData.content"></div> -->
              </td>
            </tr>
            <tr>
              <td colspan="4" style="border-bottom: 1px solid black">
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.Conclusion }}:{{ formData.conclusionName }}
                </div>
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.ConclusionReason }}:{{
                    formData.conclusionReason
                  }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button v-if="!printState" type="primary" @click="exportWord()">{{
          btn.Export
        }}</el-button>
        <el-button v-else type="primary" @click="print()">{{
          btn.Print
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../api/DeviceCalibrationTask";
import { mapGetters } from "vuex";
import printJS from "print-js";
import { formatTime } from "../../../utils/time";
import { exportWord } from "mhtml-to-word";
import { GetStaticImgInfo } from "@/api/Base";

export default {
  name: "DeviceCalibrationTaskExportView",
  components: {},
  props: {
    printState: {
      type: Boolean,
      default: false,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      size: "12px",
      listDeviceVerification: [],
      innerDialogFormVisible: false,
      loading: false,
      formLabelWidth: "120px",
      formatTime,
      formData: {
        verificationPersonName: "",
        sysBusinessImgWarehouseList: [],
        sysBusinessFileWarehouseList: [],
        conclusion: "",
        conclusionReason: "",
        deviceStatusName: "",
        verificationDateNext: "",
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.initData();
  },
  methods: {
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = GetStaticImgInfo(url);
      return res;
    },
    print() {
      const divToPrint = document.getElementById("htmlContent");
      printJS({
        printable: divToPrint,
        type: "html", // 继承样式
        targetStyle: "*",
        targetStyles: "*",
        scanStyles: true,
        // 默认800，设置1000是因为我窗口宽度是1000，而导致页面靠近左边，设置1000就正常居中了。
        maxWidth: "1000",
      });
    },
    exportWord() {
      exportWord({
        selector: "#htmlContent",
        style: "",
        filename: this.dataList.CalibResultReport,
      });
    },
    // 打印
    initData() {
      this.loading = true;
      get({ id: this.id })
        .then((res) => {
          if (res.data) {
            this.formData = res.data;
            for (
              let i = 0;
              i < this.formData.sysBusinessImgWarehouseList.length;
              i++
            ) {
              GetStaticImgInfo(
                this.formData.sysBusinessImgWarehouseList[i].filePath
              ).then((res) => {
                this.formData.sysBusinessImgWarehouseList[i].fileBase =
                  res.data;
                this.$forceUpdate();
              });
            }
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
<style>
.tab_txt {
  align-items: center;
  display: flex;
  text-indent: 10px;
}
img {
  max-width: 700px;
}
</style>
